<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>excel导入功能的实现</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <link type="text/css" rel="stylesheet" href="/layui-v2.5.6/layui/css/layui.css">
    <script src="/jq/jquery-1.9.1.js"></script>
    <script src="/layui-v2.5.6/layui/layui.js"></script>
    <style>
        #res{display: none;}
        .layui-badge {
            margin-top: 10px;
        }
        .layui-layer-dialog .layui-layer-content{
            text-align: center;
        }
    </style>
</head>
<body>

<input type="hidden" id="deleteExcelUrl">
<div class="layui-form-item">

    <div class="layui-inline">
        <label class="layui-form-label">导入模板</label>
        <div class="layui-input-inline">
            <a href="/important/downloadTemplate"  class="layui-btn layui-btn-primary">下载模板</a>
        </div>
    </div>

    <div class="layui-inline" style="margin-top: 10px;">
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
            <button type="button" class="layui-btn" id="test9">开始上传</button>
        </div>
    </div>
    <div class="layui-inline"  style="margin-top: 10px;">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" onclick="refresh()">关闭当前窗口</button>
        </div>
    </div>
</div>

<!--显示导入结果，错误可以下载错误文件-->
<div id="res">
    <div class="layui-form">
        <fieldset class="layui-elem-field">
            <legend>导入结果</legend>
            <!-- 表单控件 操作手册: http://www.layui.com/demo/form.html -->
            <div class="layui-field-box streaming-layout">
                <div class="layui-inline">
                    <label class="layui-form-label">总数</label>
                    <div class="layui-input-inline">
                        <span class="layui-badge layui-bg-blue" id="sumNum" ></span>
                    </div>
                </div>
                <!-- ----------------- END ----------------- -->
                <div class="layui-inline">
                    <label class="layui-form-label">成功数</label>
                    <div class="layui-input-inline">
                        <span class="layui-badge layui-bg-green" id="okNum" ></span>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">失败数</label>
                    <div class="layui-input-inline">
                        <span class="layui-badge" id="noNum"></span>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="hr-line-dashed"  id="tasktable"></div>
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th>处理状态</th>
            <th>成功数量</th>
            <th>失败数量</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td id="state">
            </td>
            <td id="successnumber"></td>
            <td id="failnumber"></td>
            <td id="remark"></td>
            <td id="downUrl">

            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var t ; //定时访问
    layui.use('upload', function(){
        var index ;//弹框
        var progre ;
        var $ = layui.jquery
            ,upload = layui.upload;
        upload.render({ //允许上传的文件后缀
            elem: '#test8'
            ,url: '/important/importantPart'
            ,auto: false
            ,accept: 'file' //普通文件
            ,data: {"actid":"上传文件并且需要传递参其他参数"}
            ,exts: 'xls' //只允许上传文件
            ,bindAction: '#test9'
            ,before: function(obj){
               //* index = layer.load(1);
                $("#test9").css("visibility","hidden");

                //进度条的弹框，显示成功失败数量
                progre = layer.msg("",{
                    time:0,
                    area: ['400px', '150px'],
                    skin: 'demo-class',
                    shade: [0.8, 'rgba(138, 144, 162, 0.53)']
                });
                //循环访问服务器获取进度条的数据
               t = setInterval(function(){
                    $.ajax({
                        url:"/activity/progress",
                        type:'post',
                        dataType:"json",
                        data:{'keys':"进度条需要的key","key":"xx"},
                        success:function (data) {
                            console.log("进度条数据",data);
                            var content = "";
                            content = "<div style='display:flex;flex-flow:row nowrap;justify-content: center;align-items: center;font-size:18px;margin-bottom:10px;'><img style='margin-right:10px;' width='30' height='30' src='/layui/css/modules/layer/default/loading-2.gif' /><span>请稍等...</span></div>"
                            content += "<div>正在校验第<span style='color:red;'>" + data.ROW + "</span>行数据</div>";
                            content += "<div style='display:flex;flex-flow:row nowrap;justify-content: center;align-items: center;'><div style='margin-right:10px;'>处理的数据共:<span style='color:red;'>" + data.TOTAL + "</span>条</div> <div style='margin-right:10px;'>成功:<span style='color:#23c6c8;'>" + data.ISOK + "</span>条</div><div>失败:<span style='color:red;'>" + data.ISNO + "</span>条</div></div>";
                            $(".layui-layer-content").html(content);
                        }
                    });
                }, 500);

            }
            ,done: function(res){
                //关闭进度条显示
                clearInterval(t);
                layer.close(progre)

               $("#res").css("display","block");
                console.log("导入结果数据",res)
                layer.msg(res.msg,{icon:1,time:2000});
                $("#sumNum").html(res.kv.length);
                $("#okNum").html(res.kv.isOK);
                $("#noNum").html(res.kv.isNo);

                var result = res.record;
                $("#state").html(result.state == "0" ? "正在导入" : result.state == "1" ? "导入完成" : "模版问题");
                $("#successnumber").html(result.successnumber);
                $("#failnumber").html(result.failnumber);
                $("#remark").html(result.remark);
                $("#deleteExcelUrl").val(result.downloadurl);

                //导入完成后后可下载
                if(result.state == "1"){
                    if(result.failnumber > 0){
                        $("#downUrl").html('<a href="/important'+result.downloadurl+'" >下载</a>');
                    }else{
                        $("#downUrl").html("");
                    }
                }else{
                    $("#downUrl").html("");
                }
                //layer.close(index);
            }
        });

    });

    function refresh(){
        //关闭当前窗口就是不看这个结果了，可以删除错误文件了
        var url = $("#deleteExcelUrl").val();
        if(url.length > 0) {
            $.ajax({
                url: "/activity/deleteExcel",
                dataType: "json",
                data: {"url": url},
                success: function (data) {
                    console.log(data);
                }
            });
        }
        window.parent.location.reload();
    }

</script>

</body>
</html>
